<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 引入 Element Plus 组件库的样式文件 -->
        <link rel="stylesheet" href="./css/element-plus.css" />
        <!-- 引入 Vue 3 的全局构建版本，用于创建 Vue 应用 -->
        <script src="./js/vue.global.js"></script>
        <!-- 引入 Element Plus 组件库的完整版本 -->
        <script src="./js/element-plus.full.js"></script>
        <!-- 引入 Element Plus 图标库 -->
        <script src="./js/element-plus-icon-vue.iife.min.js"></script>
        <style>
            /* 定义页面头部样式 */
            .header {
                /* 不放大、不缩小，固定高度为 40px */
                flex: 0 0 40px;
                /* 设置背景颜色 */
                background-color: #373d41;
                /* 使用 Flex 布局 */
                display: flex;
                /* 子元素在水平方向两端对齐 */
                justify-content: space-between;
                /* 子元素在垂直方向居中对齐 */
                align-items: center;
                /* 设置文字颜色为白色 */
                color: #fff;
                /* 禁止用户选中文字 */
                user-select: none;
                /* 添加白色半透明边框 */
                border: #ffffffb9 1px solid;
            }
            /* 定义页面头部内 div 元素的样式 */
            .header div {
                /* 使用 Flex 布局 */
                display: flex;
                /* 子元素在垂直方向居中对齐 */
                align-items: center;
            }
            /* 定义页面头部内 div 下 h1 元素的样式 */
            .header div h1 {
                /* 设置字体粗细 */
                font-weight: 500;
                /* 设置字体大小 */
                font-size: 22px;
                /* 设置字母间距 */
                letter-spacing: 1px;
            }
            /* 定义页面头部内 div 下 p 元素的样式 */
            .header div p {
                /* 设置字体大小 */
                font-size: 14px;
                /* 设置右侧外边距 */
                margin-right: 10px;
            }
            /* 定义小尺寸按钮的样式 */
            .el-button--small {
                /* 定义 CSS 变量，设置按钮高度 */
                --el-button-size: 24px;
                /* 使用 CSS 变量设置按钮高度 */
                height: var(--el-button-size);
                /* 设置内边距 */
                padding: 5px 11px;
                /* 设置字体大小 */
                font-size: 12px;
                /* 设置圆角半径 */
                border-radius: calc(var(--el-border-radius-base) - 1px);
            }
            /* 定义原生 aside 标签的样式 */
            aside {
                /* 以块级元素显示 */
                display: block;
                /* 确保内容独立渲染，避免与周围文本方向混淆 */
                unicode-bidi: isolate;
            }
            /* 定义侧边栏容器的样式 */
            .aside {
                /* 设置背景颜色 */
                background-color: #333744;
                /* 计算侧边栏高度，减去头部的 40px */
                height: calc(100vh - 40px);
                /* 设置侧边栏宽度 */
                width: 280px;
            }
            /* 定义 Element Plus 侧边栏组件的样式 */
            .el-aside {
                /* 当内容超出容器时，显示滚动条 */
                overflow: auto;
                /* 盒子模型采用 border-box，内边距和边框包含在元素的宽度和高度内 */
                box-sizing: border-box;
                /* 禁止 flex 项缩小 */
                flex-shrink: 0;
                /* 设置侧边栏宽度，使用 CSS 变量，默认 280px */
                width: var(--el-aside-width, 280px);
            }
            /* 定义所有 a 标签的样式 */
            a{
                /* 去除下划线 */
                text-decoration: none;
                /* 使用 Flex 布局 */
                display: flex;
                /* 设置文字颜色为白色 */
                color: #fff;
            }
            /* 定义 aside 标签内 a 标签的样式 */
            aside a{
                /* 去除下划线 */
                text-decoration: none;
                /* 使用 Flex 布局 */
                display: flex;
                /* 设置上内边距 */
                padding-top: 10px;
                /* 设置下内边距 */
                padding-bottom: 20px;
                /* 设置左内边距 */
                padding-left: 20px;
            }
            /* 定义 Element Plus 侧边栏组件内 span 元素的样式 */
            .el-aside span{
                /* 设置左内边距 */
                padding-left: 8px;
                /* 设置文字颜色为白色 */
                color: #fff;
            }
            /* 定义 Element Plus 容器组件的样式 */
            .el-container {
                /* 使用 Flex 布局 */
                display: flex;
                /* 子元素水平排列 */
                flex-direction: row;
                /* 容器可放大，占据剩余空间 */
                flex: 1;
                /* 自动计算 flex 项的基准值 */
                flex-basis: auto;
                /* 盒子模型采用 border-box，内边距和边框包含在元素的宽度和高度内 */
                box-sizing: border-box;
                /* 防止内容溢出导致容器宽度异常 */
                min-width: 0;
            }
            /* 定义垂直方向的 Element Plus 容器组件的样式 */
            .el-container.is-vertical {
                /* 子元素垂直排列 */
                flex-direction: column;
            }
            el-container {
                display: block;
                unicode-bidi: isolate;
            }
            /* 定义 Element Plus 主体内容区域的样式 */
            .el-main {
                /* 定义 CSS 变量，设置主体内容区域的内边距 */
                --el-main-padding: 20px;
                /* 以块级元素显示 */
                display: block;
                /* 主体内容区域可放大，占据剩余空间 */
                flex: 1;
                /* 自动计算 flex 项的基准值 */
                flex-basis: auto;
                /* 当内容超出容器时，显示滚动条 */
                overflow: auto;
                /* 盒子模型采用 border-box，内边距和边框包含在元素的宽度和高度内 */
                box-sizing: border-box;
                /* 使用之前定义的 CSS 变量设置内边距 */
                padding: var(--el-main-padding);
            }
            /* 定义原生 main 标签的样式 */
            main {
                /* 以块级元素显示 */
                display: block;
                /* 确保内容独立渲染，避免与周围文本方向混淆 */
                unicode-bidi: isolate;
            }
            /* 定义 iframe 元素的样式 */
            iframe {
                /* 去除边框 */
                border: 0px solid;
                /* 宽度占父容器的 100% */
                width: 100%;
                /* 高度占父容器的 90% */
                height: 90%;
            }
            /* 错误：此处应为 .el-footer 类选择器，用于定义 Element Plus 底部组件基础样式 */
            el-footer {
                display: block;
                unicode-bidi: isolate;
            }
            /* 定义 Element Plus 底部组件的样式 */
            .el-footer {
                /* 定义 CSS 变量，设置底部组件的内边距 */
                --el-footer-padding: 0 20px;
                /* 定义 CSS 变量，设置底部组件的高度 */
                --el-footer-height: 20px;
                /* 使用 CSS 变量设置内边距 */
                padding: var(--el-footer-padding);
                /* 盒子模型采用 border-box，内边距和边框包含在元素的宽度和高度内 */
                box-sizing: border-box;
                /* 禁止 flex 项缩小 */
                flex-shrink: 0;
                /* 使用 CSS 变量设置高度 */
                height: var(--el-footer-height);
            }
            /* 定义自定义底部区域的样式 */
            .footer {
                /* 不放大、不缩小，固定高度为 30px */
                flex: 0 0 30px;
                /* 文字居中显示 */
                text-align: center;
                /* 设置行高，使文字垂直居中 */
                line-height: 30px;
                /* 设置字体大小 */
                font-size: 8px;
                /* 设置文字颜色 */
                color: #333744;
            }
        </style>
    </head>
    <!-- 页面主体区域，包含实际显示的内容 -->
    <body>
        <!-- Vue 应用的挂载点，Vue 应用将渲染到该元素内 -->
        <div id="app">
            <!-- 自定义布局容器 -->
            <div class="common-layout">
                <!-- Element Plus 容器组件，用于构建页面整体布局 -->
                <el-container>
                    <!-- 页面头部组件 -->
                    <el-header class="header">
                        <!-- 左侧标题区域 -->
                        <div>
                            <!-- 显示系统标题 -->
                            <h1>熙康健康体检系统</h1>
                        </div>
                        <!-- 右侧用户信息和退出按钮区域 -->
                        <div>
                            <!-- 显示用户角色 -->
                            <p>系统管理员:</p>
                            <!-- 显示用户名 -->
                            <p>admin</p>
                            <!-- 红色圆角退出按钮 -->
                            <el-button type="danger" round class="el-button--small">
                                <!-- 点击按钮跳转到登录页面 -->
                                <a href="./login.html">OUT</a>
                            </el-button>
                        </div>
                    </el-header>

                    <!-- 嵌套的 Element Plus 容器组件 -->
                    <el-container>
                        <!-- 侧边栏组件 -->
                        <el-aside class="aside">
                            <!-- 导航链接，点击后在 iframe 中显示对应页面 -->
                            <a href="./index.html" target="myframe">
                                <!-- 显示房屋图标 -->
                                <el-icon :size="20" color="#fff"><House /></el-icon>
                                <!-- 显示导航文字 -->
                                <span >首页</span>
                            </a>
                            <!-- 导航链接，点击后在 iframe 中显示对应页面 -->
                            <a href="./ti_jian_yu_yue.html" target="myframe">
                                <!-- 显示服务图标 -->
                                <el-icon :size="20" color="#fff"><Service /></el-icon>
                                <!-- 显示导航文字 -->
                                <span >体检预约</span>
                            </a>
                            <!-- 导航链接，点击后在 iframe 中显示对应页面 -->
                            <a href="./yuyuelibiao.html" target="myframe">
                                <!-- 显示网格图标 -->
                                <el-icon :size="20" color="#fff"><Grid /></el-icon>
                                <!-- 显示导航文字 -->
                                <span >预约列表</span>
                            </a>
                            <!-- 导航链接，点击后在 iframe 中显示对应页面 -->
                            <a href="./HECI.html" target="myframe">
                                <!-- 显示文档图标 -->
                                <el-icon :size="20" color="#fff"><Document /></el-icon>
                                <!-- 显示导航文字 -->
                                <span >体检客户查询</span>
                            </a>
                        </el-aside>
                        
                        <!-- 垂直方向的 Element Plus 容器组件 -->
                        <el-container class="el-container is-vertical">
                            <!-- 主体内容区域组件 -->
                            <el-main class="el-main main">
                                <!-- 嵌套的 iframe，用于显示子页面，初始显示 welcome.html -->
                                <iframe src="./welcome.html" name="myframe"></iframe>
                            </el-main>

                            <!-- 底部组件 -->
                            <el-footer class="el-footer footer">
                                <!-- 显示版权信息 -->
                                © 版权所有 东软集团   www.neusoft.com
                            </el-footer>
                        </el-container>
                    </el-container>
                </el-container>
            </div>
        </div>
        <!-- JavaScript 脚本，用于初始化 Vue 应用 -->
        <script>
            // 定义 Vue 应用组件
            const App = {

                data() {
                    return {

                    };
                },
            };
            

            const app = Vue.createApp(App);
            // 使用 Element Plus 组件库，使应用可以使用 Element Plus 提供的组件
            app.use(ElementPlus);
            
            // 全局注册 Element Plus 图标组件，方便在模板中直接使用图标
            for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                app.component(key, component);
            }
            
            // 将 Vue 应用挂载到 id 为 app 的 DOM 元素上，启动应用渲染
            app.mount("#app");
        </script>
    </body>
</html>